<template>
  <div class="index">
    <head-text titleText="模板管理"></head-text>
    <div class="list-content">
      <div class="filter-area">
        <Search :searchData="searchData" :searchItem="searchItem"></Search>
        <div>
          <el-button @click="add" plain type="success" size="mini"
            >添加模板</el-button
          >
        </div>
      </div>
      <div class="table-title">
        <span></span>
        <h5>模板管理列表</h5>
      </div>
      <custom-table
        :tableData="tableData"
        :tableListData="tableListData"
        :tableBtn="tableBtn"
        :currentData="currentData"
        @handleEdit="handleEdit"
        @handleDownload="handleDownload"
        @onPageChange="onPageChange"
        @onSizeChange="onSizeChange"
        v-if="pageReset"
      ></custom-table>
      <dialog-com :dialogObj="dialogObj" @reflash="getList"></dialog-com>
    </div>
  </div>
</template>
<script>
import customTable from "@c/table";
import Search from "@c/search";
import headText from "@c/headText";
import dialogCom from "./dialogCom";
import { getTemplateApi } from "@s/api";
export default {
  name: "index",
  data() {
    return {
      nowPage: 1,
      total: 0,
      limit: 10,
      pageReset: true,
      searchItem: [],
      searchData: {
        name: "", // 模板名
        code: "", // 编码
        category: "" // 分类
      },
      dialogObj: {
        id: "",
        view: false,
        title: "",
        show: false,
        form: {}
      },
      filePath: "",
      tableData: [],
      currentData: {}
    };
  },
  components: {
    headText,
    Search,
    customTable,
    dialogCom
  },
  created() {
    // form搜索
    this.searchItem = [
      {
        type: "input",
        label: "模板名",
        prop: "feeType",
        placeholder: "请输入模板名"
      },
      {
        type: "input",
        label: "编码",
        prop: "feeType",
        placeholder: "请输入编码"
      },
      {
        type: "input",
        label: "分类",
        prop: "feeType",
        placeholder: "请输入分类"
      }
    ];
    //  table表格
    this.tableListData = [
      { width: "50", label: "", type: "index" },
      { prop: "name", width: "", label: "模板名" },
      {
        prop: "sn",
        width: "",
        label: "缩写"
      },
      { prop: "code", width: "", label: "编码" },
      { prop: "size", width: "", label: "文件大小" },
      { prop: "type", width: "", label: "文件类型" },
      { prop: "category", width: "", label: "文件分类" },
      { label: "操作", type: "btn", width: "180", fixed: "right" }
    ];
    // 按钮
    this.tableBtn = [
      {
        name: "编辑",
        btnType: "primary",
        handleFn: "handleEdit"
      },
      {
        name: "下载",
        btnType: "primary",
        handleFn: "handleDownload"
      }
    ];
  },
  mounted() {
    this.getList();
  },
  methods: {
    onPageChange(val) {
      this.nowPage = val;
      this.getList();
    },
    onSizeChange(val) {
      this.nowPage = 1;
      this.limit = val;
      this.getList();
    },
    // 搜索事件
    getDataList(val) {
      this.searchData = val;
      this.nowPage = 1;
      this.limit = 10;
      this.pageReset = false;
      this.$nextTick(() => {
        this.getList();
        this.pageReset = true;
      });
    },
    //获取列表
    getList() {
      let json = JSON.parse(JSON.stringify(this.searchData));
      json.page = this.nowPage;
      json.limit = this.limit;
      getTemplateApi(json).then(res => {
        this.tableData = res.list;
        this.currentData.total = res.total;
      });
    },
    add() {
      this.dialogObj.id = "";
      this.dialogObj.view = false;
      this.dialogObj.title = "添加模板";
      this.dialogObj.show = true;
    },
    handleEdit(v) {
      this.dialogObj.id = v.id;
      this.dialogObj.form = v;
      this.dialogObj.view = false; // 编辑
      this.dialogObj.title = "编辑模板";
      this.dialogObj.show = true;
    },
    handleDownload(row) {
      window.location.href = row.path;
    }
  }
};
</script>
<style scoped lang="scss"></style>
